<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
        >新增</el-button>
<!--          v-hasPermi="['system:role:add']"-->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate()"
        >修改</el-button>
<!--          v-hasPermi="['system:role:edit']"-->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete()"
        >删除</el-button>
<!--          v-hasPermi="['system:role:remove']"-->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport()"
        >导出</el-button>
<!--          v-hasPermi="['system:role:export']"-->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="fetchData"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableResult.rows" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" prop="userId" width="50" />
      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="申报单位名称" prop="reportingName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="申报单位类型" prop="reportingType"  width="120" />
      <el-table-column label="证书类型" prop="certificateType" width="120" />
      <el-table-column label="证书编号" prop="certificateNumber" width="120" />
      <el-table-column label="申报单位地址" prop="reportingAddress" width="120" />
      <el-table-column label="状态" align="center" width="100" prop="userStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userStatus === 0" type="primary">正常</el-tag>
          <el-tag v-if="scope.row.userStatus === 1" type="danger">停用</el-tag>
          <el-tag v-if="scope.row.userStatus === 2" type="warning">未审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="联系人姓名" prop="contactName" width="120" />
      <el-table-column label="电子邮箱" prop="emailAddress" width="120" />
      <el-table-column label="手机号码" prop="phone" width="120" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :before-close="cancelForm" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="userPwd">
              <el-input v-model="form.userPwd" placeholder="请输入密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申报单位类型">
              <el-select v-model="form.reportingType" clearable placeholder="请选择" style="width: 350px">
                <el-option
                  v-for="item in result1"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书类型类型">
              <el-select v-model="form.certificateType" clearable placeholder="请选择" style="width: 350px">
                <el-option
                  v-for="item in result2"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申报单位名称" prop="reportingName">
              <el-input v-model="form.reportingName" placeholder="请输入申报单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书编号" prop="certificateNumber">
              <el-input v-model="form.certificateNumber" placeholder="请输入证书编号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位地址" prop="reportingAddress">
              <el-input v-model="form.reportingAddress" placeholder="请输入单位地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位地址邮编" prop="addressCode">
              <el-input v-model="form.addressCode" placeholder="请输入单位地址邮编"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位联系电话" prop="contactNumber">
              <el-input v-model="form.contactNumber" placeholder="请输入单位联系电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人姓名" prop="contactName">
              <el-input v-model="form.contactName" placeholder="请输入联系人姓名"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="emailAddress">
              <el-input v-model="form.emailAddress" placeholder="请输入电子邮箱"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号码" prop="securityNumber">
              <el-input v-model="form.securityNumber" placeholder="请输入身份证号码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="margin-left: 350px">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="状态">
                <template v-for="item in stateList">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listApi,
  addApi,
  getApi,
  findByType,
  editApi,
  stateListApi,
  delApi
} from "@/api/tzxm/people.js"
import PageMixin from '@/mixins/PageMixin.js'
import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'

export default {
  mixins: [PageMixin, AddOrEditMixin],
  // 初始化加载 sys_dict_data表中dict_type=赋值的数据,相当于混入编程
  // dicts: ['sys_normal_disable'],
  data() {

    return {
      //新增API
      addApi: addApi,
      // 修改API
      editApi: editApi,
      // 删除API,
      delApi: delApi,
      stateList: stateListApi(),
      result1: {},
      result2: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.initFormValue()
  },
  methods: {
    /** 查询角色列表 */
    fetchDataHook() {
      return listApi
    },
    // 导出excel
    handleExport(){
      // this.download('/api/system/role/export', this.queryParams,'角色数据.xlsx')
    },
    // 初始化新增和修改表单的值
    initFormValue() {
      // 实体类主键属性
      this.primaryKey= 'userId'
      this.form ={
        status: "0",
      }

    },
    findBy1Type(){
      findByType("dwlx").then(resp=>{
          this.result1 = resp.data
      })
    },
    findBy2Type(){
      findByType("zslx").then(resp=>{
        this.result2 = resp.data
      })
    },
    // 点击新增按钮的要做的事情
    preAddHandler(){
      this.findBy1Type()
      this.findBy2Type()
    },
    // 新增保存之前的操作
    preAddSaveHandler(){
    },
    // 根据id查询
    fetchByIdHook() {
      return getApi
    },
    // 点击修改按钮要做的事情
    preEditHandler(){
      // 查询该用户的证书，单位类型
      this.findBy1Type()
      this.findBy2Type()
    }
  }

}
</script>
